<template>
	<view class="user  hv100 flex flex-direction bg-white ovh clearfix ">
		<cu-custom bgColor="bg-vip text-white" isBack >
			<block slot="content">商户会员</block>
		</cu-custom>
		<view class="flex align-center pt15 pb70 bg-vip px20 ">
			<image :src="userInfo.headerPic" class="block55 round" mode=""></image>
			<view class="flex flex-direction align-start ml10">
				<view class="flex align-center ">
					<text class="f16 text-white">{{userInfo.niName}}</text>
					<image src="/static/user/ykt.png" class="ml15  block40-18" mode="" v-if="metype==1"></image>
				</view>
				<view class="mt8 text-info f12" v-if="metype==1">到期时间: {{endtime}}</view>
				<view class="mt8 text-info f12" v-else>{{endtime}}</view>
			</view>
		</view>
		<view class="px15">
			<view class="h150 wp100 flex flex-direction">
				<text class="f18 mt30 color-vip  px20">开通商家入驻会员</text>
				<text class="f16 text-white mt10 px20">专享会员权益</text>
			</view>
		</view>
		<view class="vip-bg-white flex flex-direction px15">
			<image src="/static/user/viptc.png" class="block90-23 mt40"></image>
			<view class="flex flex-direction mt10">
				<view v-for="(item,index) in dataList" class="flex shadow-vip align-center justify-between mt5 vip-boxs px15 pl20 mt10"  :key="index">
					<view class="flex flex-direction">
						<view class="flex align-center f18">
							<text>{{item.month}}个月</text>
						</view>
						<view class="mt15 text-prices f22">￥{{item.money}}</view>
					</view>
					<view class="button-kt discenter " v-if="item.type==1">已开通</view>
					<view class="button-wkt discenter " v-else @click="kaitongvip(item,index)">立即开通</view>
				</view>
			</view>
		</view>
		<view class="mengceng" v-if="choicepay" @click="choicepay=false"></view>
		<view class="flex flex-direction wp100 bg-white mt5 px15 pay-box" v-if="choicepay">
			<view class="py15">选择支付方式</view>
			<view class="flex flex-direction">
				<view class="flex align-center pt10 pb5" >
					<image src="/static/order/choice.png" v-if="radio==2" class="block20"></image>
					<image src="/static/order/nochoice.png" @click="radio=2" v-else class="block20"></image>
					<image src="/static/order/weixin@2x.png" class="block25  ml20 mr10" mode=""></image>
					<text class=" ">微信</text>
				</view>
				<view class="flex align-center pt15 pb15 " >
					<image src="/static/order/choice.png" v-if="radio==1" class="block20"></image>
					<image src="/static/order/nochoice.png" @click="radio=1" v-else class="block20"></image>
					<image src="/static/order/airpay.png" class="block25  ml20 mr10" mode=""></image>
					<text class=" ">支付宝</text>
				</view>
			</view>
			<view class="button-pay f16 discenter" @click="surevip">立即开通</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	data() {
		return {
			endtime:'',
			metype:0,
			dataList:[],
			radio:1,
			choicepay:false,
			id:'',
			provider:''
		}
	},
	onLoad() {},
	onShow() {
		//this.getData()
	},
	onBackPress() {
		this.choicepay=false
	},
	computed: {
		...mapState(['userInfo'])
	},
	
	methods: {
		...mapActions(['getUser','logout',]),
		async getData() {
			let { data:{type,list,endTime} } = await this.$http.post('user.member')
			this.metype=type
			this.dataList=list
			this.endtime=endTime
		},	
		kaitongvip(item,index){
			this.id=item.id
			this.choicepay=true
			
		},
		async surevip(){
			let {data}=await this.$http.post('user.bemember', { id: this.id,payType:this.radio }, { tipConfig: { isSuccessTip: false } })
			if(this.radio==1){
				this.provider='alipay'
			}else{
				this.provider='wxpay'
			}
			this.requestPayment(data)
		},
		async requestPayment(data) {

			let [err, res] = await uni.requestPayment({
				provider: this.provider,
				orderInfo: data
			})
			if (res) {
				this.dibuorders = false
				uni.showToast({
					title: '支付成功',
					icon: 'success'
				})
				setTimeout(() => {
					this.TabCur=2
				}, 1500);
			}
			if (err) {
				uni.showToast({
					title: '支付失败!重新支付',
					icon: 'none'
				})
				this.dibuorders = true
			}
		}
	}
}
</script>

<style lang="less">
.pb70{
	padding-bottom: 170rpx;
}
// .h150{
// 	height: 300rpx;
// 	background-image: url(../../static/user/vippic.png);
// 	background-size: 100% 100%;
// 	position: relative;
// 	margin-top: -130rpx;
// }
.block60-22{
	width: 60px;
	height: 22px;
}
.f12sz{
	font-size: 22rpx;
	
}
.color-vip{
	color: #E8CAA0;
}
// .vip-bg-white{
// 	height: 874rpx;
// 	position: relative;
// 	margin-top: -110rpx;
// 	background-image: url(../../static/user/vip-white.png);
// 	background-size: 100% 100%;
// }
.block55{
	width: 110rpx;
	height: 110rpx;
}
.block40-18{
	width: 81rpx;
	height: 36rpx;
}
.block90-23{
	width: 180rpx;
	height: 46rpx;
}
.vip-boxs{
	width: calc(100% - 60rpx);
	height: 180rpx;
}
.button-wkt{
	background-color: #FE4725;
	color: #FFFFFF;
	width: 190rpx;
	height: 72rpx;
	border-radius: 10rpx;
}
.button-pay{
	background-color: #FE4725;
	color: #FFFFFF;
	width: calc(100% - 60rpx);
	height: 92rpx;
	border-radius: 10rpx;
	margin-left: 30rpx;
	margin-bottom: 40rpx;
}
.button-kt{
	background-color: #999999;
	color: #FFFFFF;
	width: 190rpx;
	height: 72rpx;
	border-radius: 10rpx;
}
.shadow-vip{
	-webkit-box-shadow: 3px 3px 4px rgba(26, 26, 26, 0.2);
	box-shadow: 0px 2px 4px  #d5d5d5;
}
.pay-box{
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 802;
}
.mengceng{
	background-color: #050505;
	opacity: 0.5;
	width: 100%;
	height:100vh;
	position:fixed;
	z-index: 801;
}

</style>
